<template>
  <div id="map"></div>
</template>

<script setup>
import maplibregl from "maplibre-gl";
import { onMounted } from "vue";

let map;

function initMap() {
  map = new maplibregl.Map({
    container: "map", // container id
    style: "mapbox://styles/752841728/cm2u31ghw001c01qwbjhd78v6",
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 1, // starting zoom
  });
}
function addUnderlay() {
  map.addSource("wms-test-source", {
    type: "raster",
    tiles: [
      "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=f69df935f2b4e5d06629d91c56be2809",
    ],
    tileSize: 256,
  });
  map.addLayer({
    id: "tdt-layer",
    type: "raster",
    source: "wms-test-source",
  });
}

onMounted(() => {
  initMap();
  // addUnderlay();
});
</script>

<style scoped>
#map {
  width: 500px;
  height: 500px;
}
</style>
